<template>
	<view v-if="display" class="tui-cards-container">
		<view class="tui-cards-box">
			<view class="tui-cards-title">
				<view>{{ordersendselText}}</view>
				<view style="color: #006EFF; font-family: PingFangSC-Regular;" class="tui-cards-close" @tap="handleClose">{{coloseText}}</view>
			</view>
			<view class="tui-search-bar">
				<image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
				<input class="tui-search-bar-input" :value="words" :placeholder="ordersearchText" @input="wordsInput" />
			</view>
			<scroll-view class="tui-order-list" scroll-y="true" enable-flex="true">
				<view v-for="(item, index) in orderDataList" :key="index" class="tui-order-item">
					<view class="order-title">
						<view class="order-number">{{ordersnText}}: {{ item.orderSn }}</view>
						<view class="order-time">{{ item.createTime }}</view>
					</view>
					<view class="order-info">
						<image class="order-image" :src="item.orderGoodInfo.goodThumbnail"></image>
						<view class="order-content">
							<view class="order-content-title">{{ item.orderGoodInfo.goodName }}</view>
							<!-- <view class="order-content-description">{{ item.description }}</view> -->
							<view style="display: flex; flex-wrap: no-wrap; justify-content: space-between;">
								<view class="order-content-price">{{ item.orderGoodInfo.totalAmount }}</view>
								<view class="btn-send-order" :data-order="item" @tap.stop="sendMessage"><text class="btn-send-text">{{ordersendsnText}}</text></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import {orderPage} from '@/common/http.api.js'
export default {
	data() {
		return {
			//加载更多标志
			loadMoreFlag:false,
			isEmpty:false,
			orderDataList: [],
			loadStatus: 'loadmore',
			emptyText:'',
			loadingText: '',
			loadmoreText: '',
			nomoreText: '',
			params: {
				pageNo: 1,
				pageSize: 10,
				orderSn:null,
				status: -1, //全部
			},
			words: '',
			coloseText:'',
			ordersendselText:'',
			ordersnText:'',
			ordersendsnText:'',
			ordersearchText:'',
			//orderMatch: orderDataList
		};
	},
	components: {},
	props: {
		display: {
			type: Boolean,
			default: false
		},
		conversation: {
			type: Object,
			default: () => {}
		}
	},
	created() {
	  this.refresh();
	  this.getOrderPage();
	},
	watch: {
		display: {
			handler: function(newVal) {
				// this.setData({
				//   display: newVal
				// });
			},
			immediate: true
		},
		conversation: {
			handler: function(newVal) {
				this.setData({
					conversation: newVal
				});
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		refresh(){
			this.emptyText = this.$t('common.empty.text');
			this.loadingText = this.$t('common.loading.text');
			this.loadmoreText = this.$t('common.loadmore.text');
			this.nomoreText = this.$t('common.nomore.text');
			
			this.coloseText = this.$t('common.colose.text');
			this.ordersendselText = this.$t('chat.ordersendsel.text');
			this.ordersnText = this.$t('chat.ordersn.text');
			this.ordersendsnText = this.$t('chat.ordersendsn.text');
			this.ordersearchText = this.$t('chat.ordersearch.text');
		},
		getOrderPage(){
			this.loadStatus = 'loading';
			orderPage(this.params).then((res)=>{
				uni.stopPullDownRefresh()
				if(res.code === 0){
				  if(res.data.list.length === 0){
					this.isEmpty = true;
					this.loadStatus = 'nomore'
					this.loadMoreFlag = false;
				  }else if (res.data.list.length < 10) {
					this.loadStatus = 'nomore'
					this.loadMoreFlag = false;
				  } else {
					this.params.pageNo++;
					this.loadStatus = 'loading'
					this.loadMoreFlag = true;
				  }
				  if (this.params.pageNo > 1) {
					this.orderDataList = this.orderDataList.concat(res.data.list);
				  } else {
					this.orderDataList = res.data.list;
				  }
				}
			  }).catch(error=>{
				console.error(error)
			  })
		},
		handleClose() {
			this.$emit('close', {
				detail: {
					key: '1'
				}
			});
		},
		wordsInput(e) {
			this.params.orderSn = e.detail.value;
			this.getOrderPage();
		},
		sendMessage(e) {
			const { order } = e.currentTarget.dataset;
			let ordersn = order.orderSn.substring(0,15) + '...';
			this.$emit('sendCustomMessage', {
				detail: {
					payload: {
						// data 字段作为表示，可以自定义
						data: 'order',
						description: ordersn,
						// 获取骰子点数
						extension: JSON.stringify({
							title: order.orderGoodInfo.goodName,
							imageUrl: order.orderGoodInfo.goodThumbnail,
							price: order.orderGoodInfo.totalAmount,
							id:order.id
						})
					}
				}
			});
		}
	}
};
</script>
<style>
@import './index.css';
</style>
